<template>
  <uni-popup ref="wx_popups" type="center" :mask-click="false">
    <view class="page">
      <view class="qrcode-box">
        <view class="qrcode">
          <qrcode
            ref="qr"
            canvas-id="qr"
            :value="text"
            :size="size"
			:options="{ margin: 10 }"
            @click="remake"
            @complete="complete($event)"
          ></qrcode>
        </view>
        <view class="title"> 大王赏平台 </view>
        <text class="msg">请点击下方保存至相册按钮进行付款操作</text>
        <button class="save" type="primary" size="mini" @click="save">保存至相册</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import qrcode from '@/components/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue'
export default {
	props:['text'],
  components: {
    qrcode
  },
  data() {
    return {
      size: 150
    }
  },
  methods: {
    open() {
      this.$refs.wx_popups.open()
    },
    complete(e) {
      if (e.success) {
        ////console.log('生成成功')
      } else {
        ////console.log('生成失败')
      }
    },
    remake() {
      const ref = this.$refs['qr']
      ref.remake()
    },
    save() {
      uni.showLoading({
        title: '保存中',
        mask: true
      })
      const ref = this.$refs['qr']
      ref.save({
        success: res => {
          uni.hideLoading()
          uni.showToast({
            icon: 'success',
            title: '保存成功'
          })
		  this.$refs.wx_popups.close()
		  uni.showModal({
		    title: '提示',
		    content: '是否支付完成',
		    success: (res) => {
		      if (res.confirm) {
		        ////console.log('用户点击确定')
				this.$emit('isPaySuccess')
		      } else if (res.cancel) {
		        ////console.log('用户点击取消')
		        this.$emit('isPaySuccess')
		      }
		    }
		  })
        },
        fail: err => {
          uni.showToast({
            icon: 'none',
            title: JSON.stringify(err)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  width: 570rpx;
  height: 830rpx;
  border-radius: 20rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
}
.title {
  margin-top: 30rpx;
}

.qrcode-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 30px;
}

.qrcode {
  margin-top: 100rpx;
  padding: 16rpx;
  background-color: #ffffff;
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
  border-radius: 2rpx;
  overflow: hidden;
}

.msg {
  margin-top: 87rpx;
  font-size: 22rpx;
  color: #9a9b9c;
}

.save {
  margin-top: 56rpx;
  background: #76a970;
  border-radius: 40rpx;
  width: 470rpx;
  height: 79rpx;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 79rpx;
}
</style>
